<?php include 'header.php'; ?>

<style>
        
    .contenedorBlog {
        float:left;
        color:black;
        margin-top:10px;
        text-align:center;
        margin-bottom:215px;
    }
    
    .contenedorNoticiaBlog {
        float:left;
        /*margin:.8%;*/
        width:100%;
        height:auto;
        padding:10px 0 5px 10px;
        margin:0;
        border-bottom:silver solid 1px;
        border-radius:0;
        -webkit-transition-property: background;
        -webkit-transition-duration: .3s;
        -webkit-transition-timing-function: ease;
        -moz-transition-property: background;
        -moz-transition-duration: .3s;
        -moz-transition-timing-function: ease;
        
    }
    
    .contenedorNoticiaBlog:hover {
        background-color: #eff1ff;
        /*cursor:pointer;*/
        /*border: #5789ad solid 1px;*/
    }
    .imagenBlog {
        float:left;
        width:100%;
        height:auto;
    }
    
    .by {
        text-align:left;
        font-size:13px;
        padding-top:5px;
    }
    .resumen {
        float:left;
        /*margin-top:10px;*/
        padding:10px;
        width:calc(100% - 400px);
        text-align:left;
        font-size:13px;
    }
    
    a.titular {
        float:left;
        margin-top:10px;
        width:200px;
        font-weight:bold;
        border-radius:13px;
        color:black;
        font-size:15px;
        -webkit-transition-property: color;
        -webkit-transition-duration: .3s;
        -webkit-transition-timing-function: ease;
        -moz-transition-property: color;
        -moz-transition-duration: .3s;
        -moz-transition-timing-function: ease;
    }
    
    a.titular:hover {
        color:#5789ae;
        text-decoration:none;
    }
    
    .blog {
        font-weight:bold;
        background-color:#5789ad;
        color:white;
        font-size:20px;
        text-align:center;
        float:left;
        width:100%;
    }
    
    .contenedorImgBlog {
        float:left;
        width:50px;
        height:50px;
        overflow:hidden;
        padding:2px;
        box-shadow: none;
        /*border-radius:5px;*/
/*        background-color:white;
        padding:2px;
        border:silver solid 1px;*/
        /*box-shadow: 2px 2px 10px #888888;*/
    }
    
     .remove {
            cursor:pointer;
            -webkit-transition-property: color;
            -webkit-transition-duration: .3s;
            -webkit-transition-timing-function: ease;
            -moz-transition-property: color;
            -moz-transition-duration: .3s;
            -moz-transition-timing-function: ease;
        }

        .search {
            cursor:pointer;
            -webkit-transition-property: color;
            -webkit-transition-duration: .5s;
            -webkit-transition-timing-function: ease;
            -moz-transition-property: color;
            -moz-transition-duration: .5s;
            -moz-transition-timing-function: ease;
        }

        .pencil {
            cursor:pointer;
            -webkit-transition-property: color;
            -webkit-transition-duration: .5s;
            -webkit-transition-timing-function: ease;
            -moz-transition-property: color;
            -moz-transition-duration: .5s;
            -moz-transition-timing-function: ease;
        }
        .remove:hover {
            color:red;
        }

        .search:hover {
            color:blue;
        }

        .pencil:hover {
            color:green;
        }

        .opcion {
            float:right;padding:5px 5px 5px 5px;margin:2px;

            -webkit-transition-property: border;
            -webkit-transition-duration: .5s;
            -webkit-transition-timing-function: ease;
            -moz-transition-property: border;
            -moz-transition-duration: .5s;
            -moz-transition-timing-function: ease;
            /*border:transparent solid 1px;*/
        }

        .opcion:hover {
            cursor:pointer;
            /*border:black solid 1px;*/
        }
</style>
    <body>
        <?php include '../menus/menuUsuario.php'; ?>
            <?php include 'sidebar.php'; ?>
            <div class="content" style="padding-bottom:100px;">
                <?php if ($noticias = obtenerNoticias()) {
                    $i = 0; ?> 

                    <div class="header">
                        <h1 class="page-title">Kinet Noticias</h1>
                    </div>
                      <?php  while ($i < count($noticias)) { ?>

                        <div class="contenedorNoticiaBlog">
                            
                            <div class="contenedorImgBlog" >
                                <img class="imagenBlog thumb" src="../<?php echo $noticias[$i]['foto']; ?>">
                            </div>
                            
                            <div class="contenedorImgBlog">
                                <img class="imagenBlog" src="../<?php echo $noticias[$i]['imagen']; ?>">
                            </div>
                            
                            <div style="float:left;padding-left:5px;">
                                <div style="float:left;">
                                    <a class="titular" onclick="javascript:document.verNoticia<?php echo $i ?>.submit();" href="#"><?php echo $noticias[$i]['titular'] ?></a>
                                </div>
                                <div class="by">
                                    by <font style="color:#5789ad"><?php echo $noticias[$i]['nombre']." ".$noticias[$i]['apellidos'] ?></font>
                                </div>
                            </div>
                            
                            <div class="resumen">
                                <?php echo substr($noticias[$i]['resumen'], 0, 200)."..."; ?>
                            </div>
                            
                            <div style="float:right;">
                                
                                <div class="opcion">
                                    <i class="icon icon-remove remove" onclick="javascript:document.eliminarNoticia<?php echo $i; ?>.submit();" title="Borrar Noticia" ></i>
                                </div>
                                <div class="opcion">
                                    <i class="icon icon-search search" onclick="javascript:document.verNoticia<?php echo $i ?>.submit();" title="Leer Noticia"></i>
                                </div>
                                <div class="opcion">
                                    <i class="icon icon-pencil pencil" onclick="javascript:document.editarNoticia<?php echo $i ?>.submit();" title="Editar Noticia"></i>
                                </div>
                                
                            </div>
                            
                            <div style="clear:both;"></div>
                            <div style='width:100%;height:0'>
                                <form method='post' name='verNoticia<?php echo $i; ?>' action='verNoticia.php'>
                                    <input type='hidden' name='bid' value='<?php echo $noticias[$i]['idBlog'] ?>'>
                                </form>
                                <form method='post' name='editarNoticia<?php echo $i; ?>' action='editarNoticia.php'>
                                    <input type='hidden' name='bid' value='<?php echo $noticias[$i]['idBlog'] ?>'>
                                </form>
                                <form method='post' name='eliminarNoticia<?php echo $i; ?>' action='../logic/eliminarNoticia.php'>
                                    <input type='hidden' name='bid' value='<?php echo $noticias[$i]['idBlog'] ?>'>
                                </form>
                            </div>
                        </div>

                         <?php $i++;
                        }
                    }
                ?>
                <div style="clear:both"></div>
                <div style='position:absolute;bottom:0;width:100%;margin-left:12px;'>
                    <?php include 'footer.php'; ?>
                </div>
            </div>
            
            <script src="lib/bootstrap/js/bootstrap.js"></script>
    
        <!--</div>-->
    </body>
</html>